﻿<!DOCTYPE html>
{% load staticfiles %}
<html>
	<head>
		<meta charset="utf-8">
		<title>房天下 - 首页</title>
		<link rel="stylesheet" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" href="{% static 'css/head.css' %}">
	</head>
	<body>
        {% include 'header.html' %}
        {% include 'nav.html' %}
		{% verbatim %}
		<div id="app" class="main wrap">
			<table class="house-list">
				<tr v-for="house in houses">
					<td class="house-thumb">
						<div>
							<img :src="house.mainphoto" width="160" height="120" alt="">
							<span class="count">{{ house.photocount }}图</span>
						</div>
					</td>
					<td>
						<dl>
							<dt>
								<a @click="">{{ house.title }}</a>
							</dt>
							<dd>
								{{ house.district.name }}&nbsp;{{ house.street }}&nbsp;
								{{ house.area }}平米&nbsp;{{ house.floor }}层/{{ house.totalfloor }}层 <br>
							</dd>
							<dd>
								<span v-for="tag in house.tags" class="house-tag">{{ tag.content }}</span>
							</dd>
						</dl>
					</td>
					<td class="house-type">{{ house.type.name }}</td>
					<td class="house-price"><span>{{ house.price }}</span>{{ house.priceunit }}</td>
				</tr>
			</table>
			<div class="pager">
				<ul>
					<li class="current">
						<a @click="">首页</a>
					</li>
					<li>
						<a @click="">上一页</a></li>
					<li>
						<a @click="">下一页</a>
					</li>
					<li>
						<a @click="">末页</a>
					</li>
				</ul>
			</div>
		</div>
		{% endverbatim %}
        {% include 'footer.html' %}
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					houses: [],
				},
				created() {
					fetch('/api/houseinfos')
						.then(resp => resp.json())
						.then(json => {
							this.houses = json.results
						})
				}
			})
		</script>
	</body>
</html>